import { createRouter, createWebHashHistory } from 'vue-router'
import client from './modules/client'
import project from './modules/project'
import { useUserStore } from '@/stores/user.js'
import { useDesignStore, domTreeMap } from '../stores/design'
import { useManageStore } from '../stores/manage'

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            name: 'home',
            path: '/home',
            component: () => import('@/views/home/Home.vue')
        },
        client,
        project
    ]
})

const SHARED_LIST = ['/home']

const WHITE_LIST = [
    '/home',
    '/client/login',
    '/client/sign-up',
    '/client/reset-password'
]

router.beforeEach(async (to, from, next) => {
    const User = useUserStore()
    const Design = useDesignStore()
    var autoSave = null
    // 自动保存 design 界面
    if (to.fullPath === '/project/design') {
        if (!Design.autoSaveIsOK) {
            // 防止重复赋值
            Design.autoSaveIsOK = true
            autoSave = setInterval(() => {
                // 离开页面时删除 autoSave
                if (!Design.autoSaveIsOK) {
                    clearInterval(autoSave)
                }
                // 项目创建成功前 或 调试js函数时 或 离开界面时，关闭自动保存
                if (Design.project_id !== '-1' && Design.editCss && Design.autoSaveIsOK) {
                    // 保存到后端
                    // 获取 html 代码
                    const htmlAll = Design.getHtmlAll()
                    Design.currentDomPointer.attr.class =
                        Design.currentDomPointer.attr.class.replace(
                            'highlighted',
                            ''
                        )
                    const copyDom = Design.eraseDefault(domTreeMap['canvas'])
                    Design.exportPageCode({
                        project_id: Design.project_id,
                        html: htmlAll,
                        js: '',
                        domTreeMap: copyDom,
                        count: Design.count
                    })
                }
            }, 1000)
        }
    }
    if (from.fullPath === '/project/design') {
        // 清除
        Design.autoSaveIsOK = false
        if (!Design.editCss) {
            setTimeout(() => {
                Design.jsToCss()
            }, 300)
        }
    }

    // load User
    if (!User.$state.is_load) {
        await User.initialize()
    }
    // auth user redirect to project
    if (WHITE_LIST.includes(to.fullPath) && User.is_auth) {
        if (SHARED_LIST.includes(to.fullPath)) {
            next()
        } else {
            next({
                name: 'manage'
            })
        }
    } else if (!WHITE_LIST.includes(to.fullPath) && !User.is_auth) {
        // unauth user redirect to login
        next({
            name: 'login'
        })
    } else {
        // next
        next()
    }
})
export default router
